<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 1.标准盒子 内容盒子 w3c盒子 
            盒子宽：内容区宽+左右内边距+左右边框
            盒子高：内容区高+上下内边距+上下边框
            盒子所占页面宽：盒子宽+左右外边距
            盒子所占页面高：盒子高+上下外边距
        */
        .contentbox{
        width: 100px;
        height: 100px;
        /* border:width style color */
            
        border: 5px solid pink;
       padding: 13px 27px 36px 24px;
       margin: 15px 33px 25px 14px;
       
        /* 上下左右的内边距都为10px */
        /* padding: 10px; */
        /* 上下为10px 左右为20px */
        /* padding: 10px 20px ; */
        /* 上为10 左右20 下30 */
        /* padding: 10px 20px 30px; */
        /* 上10 右20 下30 左40 */
        /* padding: 10px 20px 30px 40px; */
        /* border-top: 10px dotted orange; */
        /* 设置盒子背景图片 设置盒子渐变色 */
        /* background-image: url(../day01/音视频/ad7.jpeg) */
        /* 线性渐变 */
        /* background-image: linear-gradient(to right bottom,red,blue,cyan) */
        /* 设置背景图片大小尺寸 */
        /* background-size：100% 100%; */
        }
        /* 2.边框盒子 怪异盒子 IE盒子 */
        borderbox{
            /* 开启边框盒子 默认是内容盒子 content-box */
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border: 8px solid blue;
            padding: 12px 24px 17px 34px;
            margin: 15px 37px 15px 24px;
            /* 径向渐变 */
            background-image: radial-gradient(pink,orange,blue);

        }

    </style>
</head>
<body>
    <div class="contentbox">标准盒子</div>
    <div class="borderbox">边框盒子</div>
</body>
</html>